<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<title>小组管理</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap2.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/fullcalendar.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/fullcalendar.print.min.css" rel="stylesheet" media="print">
	<link href="/static/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
	<link href="/static/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
	<link href="/static/fullcalendar/lib/cupertino/jquery-ui.min.css" rel="stylesheet">
	<link href="/static/artDialog/css/ui-dialog.css" rel="stylesheet">
	<link href="/static/wickedpicker/dist/wickedpicker.min.css" rel="stylesheet">
	<script src="/static/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
	<script src="/static/fullcalendar/lib/jquery.min.js"></script>
	<script src="/static/fullcalendar/lib/jquery-ui.min.js"></script>
	<script src="/static/fullcalendar/lib/moment.min.js"></script>
	<script src="/static/fullcalendar/fullcalendar.js"></script>
	<script src="/static/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="/static/artDialog/dist/dialog-min.js"></script>
	<script src="/static/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/wickedpicker/dist/wickedpicker.min.js"></script>
	<script src="/static/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
	<script src="/static/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
	<style>
		body{
			margin:40px 40px;
			padding:0;
			background:white;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 14px;
		}
	</style>
	<script>
        var selectGroupId = 0;
        //设置当前小组
        function setSelectGroup(GroupId) {
            selectGroupId = GroupId;
            {#$('#InviteGroupModal').modal('show');#}
        }

        function setSelectGroupInfo(GroupId,GroupName,GroupTask,GroupMark,GroupKey) {
            $('#update_group_id').val(GroupId);
            $('#update_group_name').val(GroupName);
            $('#update_group_task').val(GroupTask);
            $('#update_group_mark').val(GroupMark);
            $('#update_group_key').val(GroupKey);
            {#$('#InviteGroupModal').modal('show');#}
        }
    //--退出小组
	function groupQuit(group_id) {
		if(confirm("确认退出？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_quit",//url
                data:"{\"group_id\":\""+group_id+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("退出小组出错！");
                    window.location.reload();
                }
            });
        }
	};


	    //--解散小组
	function groupDelete(group_id) {
		if(confirm("确认解散？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_delete",//url
                data:"{\"group_id\":\""+group_id+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("解散小组出错！");
                    window.location.reload();
                }
            });
        }
	};

	//创建小组
	function groupAdd() {
	    var groupName = $('#group_name').val();
	    var groupMark = $('#group_mark').val();
	    var groupKey = $('#group_key').val();
	    var groupTask = $('#group_task').val();
		if(confirm("确认添加？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_add",//url
                data:"{\"group_name\":\""+groupName+"\",\"group_mark\":\""+groupMark+"\",\"group_task\":\""+groupTask+"\",\"group_key\":\""+groupKey+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("新增小组成功！");
                        window.location.reload();
                    }
                    else{
                        alert("新增小组失败！");
                    }
                    ;

                },
                error: function () {
                    alert("新增小组成功！");
                    window.location.reload();
                }
            });
        }
	};

	//加入小组
	function groupJoin() {
	    var groupName = $('#join_group_name').val();
	    var groupKey = $('#join_group_key').val();
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/group/group_join",//url
                data:"{\"group_name\":\""+groupName+"\",\"group_key\":\""+groupKey+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("加入小组出现错误！");
                    window.location.reload();
                }
            });
	};


	//邀请成员
	function groupInvite() {
	    var invite_user_nickname = $('#invite_user_nickname').val();
	    var groupId = selectGroupId;
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_add_colleague",//url
                data:"{\"nickname\":\""+invite_user_nickname+"\",\"group_id\":\""+groupId+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        $("#btnSubmit").attr("disabled", true);
                        window.location.reload();
                    }
                    else{
                        alert("ERROR:小组信息错误！");
                    }
                },
                error: function () {
                    alert("邀请成功");
                    window.location.reload();
                }
            });
	};

    //修改小组
	function groupUpdate() {
	    var groupId = $('#update_group_id').val();
	    var groupName = $('#update_group_name').val();
	    var groupMark = $('#update_group_mark').val();
	    var groupKey = $('#update_group_key').val();
	    var groupTask = $('#update_group_task').val();
		if(confirm("确认添加？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/group/group_info_update",//url
                data:"{\"group_id\":\""+groupId+"\",\"group_name\":\""+groupName+"\",\"group_mark\":\""+groupMark+"\",\"group_task\":\""+groupTask+"\",\"group_key\":\""+groupKey+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("修改小组信息成功！");
                        window.location.reload();
                    }
                    else{
                        alert("修改小组信息失败！");
                    }
                },
                error: function () {
                    alert("修改小组信息成功！");
                    window.location.reload();
                }
            });
        }
	};
    </script>
</head>
<body style="background: url('/static/imgs/background.jpg');background-repeat:no-repeat;background-size:cover">
    <!-- 导航栏 -->
    <nav class="navbar navbar-fixed-top navbar-inverse" style="height: 40px;" >
      <div class="container">
        <div class="navbar-header" style="height: 40px;">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/user/to_user_index_page">主页</a></li>
            <li><a href="/schedule/toScheduleList">代办列表</a></li>
            <li><a href="/colleague/colleague_list">好友管理</a></li>
            <li><a href="/group/user_group_list">小组管理</a></li>
            <li><a href="#" data-toggle="modal"  data-target="#updateUserInfo">欢迎您 {{ session["user_nickname"] }}</a></li>
            <li><a href="/user/user_logout">注销</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

     <!-- 修改用户信息 -->
<div class="modal fade" id="updateUserInfo" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
	            </div>
                <div class="modal-body">
                      <div class="form-group">
					    <label for="exampleInput1">用户名</label>
					    <input type="text" class="form-control" id="update_user_name" value="{{ session['user_name'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">密码</label>
					    <input type="text" class="form-control" id="update_user_pwd" value="{{ session['user_pwd'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">昵称</label>
					    <input type="text" class="form-control" id="update_user_nickname" value="{{ session['user_nickname'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">性别</label>
					    <input type="text" class="form-control" id="update_user_sex" value="{{ session['user_sex'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">邮箱</label>
					    <input type="text" class="form-control" id="update_user_email" value="{{ session['user_email'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">电话</label>
					    <input type="text" class="form-control" id="update_user_phone" value="{{ session['user_phone'] }}">
					  </div>
	            </div>
                <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="updateUser()">修改</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <script> //修改小组
	function updateUser() {
	    var user_name = $('#update_user_name').val();
	    var user_pwd = $('#update_user_pwd').val();
	    var user_nickname = $('#update_user_nickname').val();
	    var user_sex = $('#update_user_sex').val();
	    var user_email = $('#update_user_email').val();
	    var user_phone = $('#update_user_phone').val();
		if(confirm("确认修改？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/user_data_update",//url
                data:"{\"user_sex\":\""+user_sex+"\",\"user_name\":\""+user_name+"\",\"user_pwd\":\""+user_pwd+"\",\"user_nickname\":\""+user_nickname+"\",\"user_email\":\""+user_email+"\",\"user_phone\":\""+user_phone+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == "SUCCESS") {
                        alert("修改小组信息成功！");
                        window.location.reload();
                    }
                    else{
                        alert("修改小组信息失败！");
                    }
                },
                error: function () {
                    alert("修改用户信息成功！");
                    window.location.reload();
                }
            });
        }
	};
    </script>

    <!-- 导航栏结束 -->

    <div class="container">
    <div class="col-sm-12" >

    <br>
    <button type="button" id="btnAdd" data-toggle="modal" data-target="#JoinGroupModal"  class="btn btn-primary">加入小组</button>
    <button type="button" id="btnAdd" data-toggle="modal" data-target="#AddGroupModal"  class="btn btn-primary">创建小组</button>
    <br/>

    <h2>我加入的小组</h2>
    <table class="table table-hover">
        {%  if user_group_list %}
                <tr>
                    <td>小组名称</td>
                    <td>小组备注</td>
                    <td>小组任务</td>
                    <td>组长</td>
                    <td>操作</td>
                </tr>

            {% for item in user_group_list %}
                <tr>
                    <td>{{ item.group_name }}</td>
                    <td>{{ item.group_mark }}</td>
                    <td>{{ item.group_task }}</td>
                    <td>{{ item.group_leader_name }}</td>

                    <td>
                        <a href="/group/group_detail?group_id={{ item.id }}"><button type="button" class="btn btn-primary">小组详情</button></a>
                        <a href="#" onclick="groupQuit({{ item.id }})"><button type="button" class="btn btn-primary">退出小组</button></a>
                    </td>
                </tr>
            {% endfor %}
        {% else %}
            <a href="">尚未加入小组</a>
        {% endif %}
    </table>
    </div>
     <br/>

    <h2>我创建的小组</h2>
    <table class="table table-hover">
        {%  if my_group_list %}
                <tr>
                    <td>小组名称</td>
                    <td>小组备注</td>
                    <td>小组任务</td>
                    <td>小组密钥</td>
                    <td>操作</td>
                </tr>

            {% for item in my_group_list %}
                <tr>
                    <td>{{ item.group_name }}</td>
                    <td>{{ item.group_mark }}</td>
                    <td>{{ item.group_task }}</td>
                    <td>{{ item.group_key }}</td>
                    <td>
                        <a href="/group/group_detail?group_id={{ item.id }}"><button type="button" class="btn btn-primary">小组详情</button></a>
                        <a href="#"><button type="button" data-toggle="modal" class="btn btn-primary" data-target="#UpdateGroupModal" onclick="setSelectGroupInfo({{ item.id }},'{{ item.group_name }}','{{ item.group_mark }}','{{ item.group_task }}','{{ item.group_key }}')">修改小组</button></a>
                        <a href="#"><button type="button" data-toggle="modal" data-target="#InviteGroupModal" onclick="setSelectGroup({{ item.id }})" class="btn btn-primary">邀请组员</button></a>
                        <a href="#" onclick="groupDelete({{ item.id }})"><button type="button" class="btn btn-primary">解散小组</button></a>
                    </td>
                </tr>
            {% endfor %}
        {% else %}
            <a href="">尚未加入小组</a>
        {% endif %}
    </table>
    </div>

   <!-- 模态框（Modal） -->
<div class="modal fade" id="JoinGroupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">加入小组</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组名称</label>
					    <input type="text" class="form-control" id="join_group_name" placeholder="小组名称">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组密钥</label>
					    <input type="text" class="form-control" id="join_group_key" placeholder="小组密钥">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="groupJoin()">加入</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="AddGroupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">创建小组</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组名称</label>
					    <input type="text" class="form-control" id="group_name" placeholder="小组名称">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组备注</label>
					    <input type="text" class="form-control" id="group_mark" placeholder="小组备注">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组密钥</label>
					    <input type="text" class="form-control" id="group_key" placeholder="小组密钥">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组任务</label>
					    <input type="text" class="form-control" id="group_task" placeholder="小组任务">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="groupAdd()">创建</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<div class="modal fade" id="InviteGroupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">邀请成员</h4>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">用户昵称</label>
					    <input type="text" class="form-control" id="invite_user_nickname" placeholder="用户昵称">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="invite" class="btn btn-primary" onclick="groupInvite()">邀请</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<div class="modal fade" id="UpdateGroupModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">修改小组信息</h4>
	            </div>
         <div class="modal-body">
					  <div class="form-group">
					    <input type="hidden" class="form-control" id="update_group_id">
					  </div>
	            </div>
     <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组名称</label>
					    <input type="text" class="form-control" id="update_group_name" placeholder="小组名称">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组备注</label>
					    <input type="text" class="form-control" id="update_group_mark" placeholder="小组备注">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组密钥</label>
					    <input type="text" class="form-control" id="update_group_key" placeholder="小组密钥">
					  </div>
	            </div>
        <div class="modal-body">
					  <div class="form-group">
					    <label for="exampleInput1">小组任务</label>
					    <input type="text" class="form-control" id="update_group_task" placeholder="小组任务">
					  </div>
	            </div>
      <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="groupUpdate()">修改</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

</body>
</html>